<template>
  <div class="loginContainer">
    <!-- 头部的logo区域 -->
    <div class="layui-main">
      <img src="@/assets/logo.png" alt="" />
    </div>
    <!-- 登录注册区域 -->
    <div class="loginAndRegBox">
      <div class="title-box"></div>
      <!-- 登录的div -->
      <div class="login-box" v-if="isShow">
        <form class="layui-form" action="" id="form_login">
          <!-- 用户名 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-username"></i>
            <input
              type="text"
              name="username"
              required
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
              v-model.trim="username"
            />
          </div>
          <!-- 密码 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <input
              type="password"
              name="password"
              required
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
              v-model.number="password"
            />
          </div>
          <!-- 登录-->
          <div class="layui-form-item">
            <button
              class="layui-btn layui-btn-fluid layui-btn-normal"
              lay-filter="formDemo"
              @click.prevent="loginbtn"
            >
              登录
            </button>
          </div>
          <!-- 注册按钮 -->
          <div class="layui-form-item links">
            <a href="javascript:;" id="link_reg" @click="toggle()"
              >去注册账号</a
            >
          </div>
        </form>
      </div>
      <!-- 注册的div -->
      <div class="reg-box" v-else>
        <form class="layui-form" action="" id="form_reg">
          <!-- 用户名 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-username"></i>
            <input
              type="text"
              name="username"
              required
              lay-verify="required"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
              v-model.trim="username"
            />
          </div>
          <!-- 密码 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <input
              type="password"
              name="password"
              required
              lay-verify="required|pwd"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
              v-model.number="password"
            />
          </div>
          <!-- 确认密码 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <input
              type="password"
              name="repassword"
              required
              lay-verify="required|pwd|repwd"
              placeholder="再次确认密码"
              autocomplete="off"
              class="layui-input"
              v-model.number="repassword"
            />
          </div>
          <!-- 注册按钮 -->
          <div class="layui-form-item">
            <button
              class="layui-btn layui-btn-fluid layui-btn-normal"
              lay-submit
              @click.prevent="registerbtn"
            >
              注册
            </button>
          </div>
          <!-- 去登录 -->
          <div class="layui-form-item links">
            <a href="javascript:;" id="link_login" @click="toggle()">去登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { register, login } from '@/api/login'
import { Message } from 'element-ui'
export default {
  name: 'loginIndex',
  data () {
    return {
      isShow: true,
      username: '',
      password: '',
      repassword: ''
    }
  },
  created () {
    // this.fresh();
  },
  methods: {
    // 切换登录注册页面
    toggle () {
      this.isShow = !this.isShow
    },
    // 实现登录功能
    async loginbtn () {
      try {
        if (this.username === '' || this.password === '') {
          return alert('请输入用户名和密码')
        }
        const { data } = await login({
          username: this.username,
          password: this.password
        })
        if (data.status === 0) {
          Message({
            message: '登录成功',
            center: true
          })
          this.$router.push({ name: 'dashboard' })
          // this.fresh()
        } else {
          alert('用户名或密码错误')
        }

        console.log(data)
      } catch (err) {
        console.log(err)
      }
      this.username = ''
      this.password = ''
    },
    /// /实现注册功能
    async registerbtn () {
      try {
        if (
          this.username === '' ||
          this.password === '' ||
          this.repassword === ''
        ) {
          return alert('请输入用户名和密码')
        } else if (this.password !== this.repassword) {
          return alert('两次输入密码必须一致')
        }
        const { data } = await register({
          username: this.username,
          password: this.password
        })
        console.log(data)
        if (data.status === 0) {
          Message({
            message: '注册成功',
            center: true
          })
          this.isShow = true
        }
      } catch (err) {
        console.log(err)
      }
      // 清除内容
      this.username = ''
      this.password = ''
      this.repassword = ''
    }
  }
}
</script>

<style scoped>
.loginContainer {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  /* 注意图片路径 图片属于*/
  background: url("../../assets/login_bg.jpg") no-repeat center;
  background-size: cover;
}

.loginAndRegBox {
  width: 400px;
  height: 310px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.title-box {
  height: 60px;
  background: url("/assets/images/login_title.png") no-repeat center;
}

.layui-form {
  padding: 0 30px;
}

.links {
  display: flex;
  justify-content: flex-end;
}

.links a {
  font-size: 12px;
}

.layui-form-item {
  position: relative;
}

.layui-icon {
  position: absolute;
  top: 10px;
  left: 10px;
}

.layui-input {
  padding-left: 32px;
}
</style>
